<template>
  <el-table :data="treeData" row-key="objectId" style="width: 100%">
    <el-table-column label="分类层级">
      <template #default="scope">
        {{ scope.row.parent == "0-0" ? "一级类目" : "" }}
      </template>
    </el-table-column>
    <el-table-column label="分类名称" prop="name"></el-table-column>
    <el-table-column label="是否展示" width="180">
      <template #default="scope">
        <el-switch
          v-model="scope.row.isShow"
          inactive-value="2"
          active-value="1"
        />
      </template>
    </el-table-column>
    <el-table-column label="分类图标" width="180">
      <template #default="scope">
        <img :src="scope.row.icon" class="h-10" alt="" srcset="" />
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button
          v-permit
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          v-if="user.userInfo?.name == '超级管理员'"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { CategoryType } from "../../types/job";
import { useCategory } from "../../store/category";
import { computed } from "vue";
import { useAccount } from "../../store/user";
const category = useCategory();
const treeData = computed<Array<CategoryType>>(() => {
  // 先挑出所有父级
  let parentArr = category.list.filter((item) => item.parent == "0-0");
  // 从category.list中跳出属于对应父级的children
  parentArr.forEach((item) => {
    item.children = category.list.filter(
      (child) => child.parent == item.objectId
    );
  });
  return parentArr;
});

const handleEdit = (index: number, row: CategoryType) => {
  console.log(index, row);
};
const handleDelete = (index: number, row: CategoryType) => {
  console.log(index, row);
};

// 按钮权限控制
const user = useAccount();
</script>
